<template>
  <view class="container">
    <!-- 居中卡片 -->
    <view class="card">
      <!-- 按钮容器 -->
      <view class="button-group">
		  
        <u-button type="" style="width: 100%;height: 100%;" text="主要按钮" @click="handlePrimary">
			
			<view class="contleft">
				<u-icon name="/static/icon/doctorc.png" size="100"></u-icon>
			</view>
			<view class="contright">
				<span class="conta">个人报告查询</span>
				<span class="contb">绑定体检人&emsp;快速查询</span>
			</view>
			
		</u-button>
		
		
		
								
		
        <u-button type=""  text="成功按钮" @click="handleSuccess" style="margin-top: 20rpx;width: 100%;height: 100%;">
			<view class="contleft">
				<u-icon name="/static/icon/jzrglc.png" size="100"></u-icon>
			</view>
			<view class="contright">
				<span class="conta">报告查询</span>
				<span class="contb">输入个人信息&emsp;快速查询</span>
			</view>
			
			
			
		</u-button>
      </view>
    </view>
  </view>
   <image
        src="/static/icon/yisheng.png"
       
        mode="widthFix"
        class="fixed-image"
      ></image>
</template>

<script>
export default {
  methods: {
    handlePrimary() {
     uni.navigateTo({
     	url: "/pages/MedicalExamination/Health/HealthShow",
     	fail(error) {
     		console.log(error)
     	}
     })
    },
    handleSuccess() {
     uni.navigateTo({
     	url: "/pages/MedicalExamination/ChaXun/AddUser",
     	fail(error) {
     		console.log(error)
     	}
     })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; // 满屏高度
  background-color: #f5f5f5;
}

.card {
  width: 80%;
  padding: 40rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
  
  // 卡片动画（可选）
  animation: cardEnter 0.6s ease;
}

.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fixed-image {
  position: fixed;
  left: 30rpx;
  bottom: 30rpx;
  z-index: 999;
  width: 50%;
  height: 50%;
  opacity: 0.8;
  // transition: all 0.3s;

  /* 适配iPhoneX等有底部安全区域的设备 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

 
}
@keyframes cardEnter {
  from {
    transform: translateY(60rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
<style>
	.headers{
		padding: 20rpx 25rpx;
		background-image: url('../../static/doctor.jpg');
		height: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-bottom-right-radius:30rpx ;
		border-bottom-left-radius:30rpx ;
	}
	.count{
		padding: 5px 10px;
	}
	.a{
		margin-top: 6px;
		font-size: 22px;
	}
	.b{
		margin-top: 5px;
		font-size: 14px;
		background-color:#F7C448;
		width: 70px;
		padding-left: 10px;
		color: white;
	}
	.lefttext{
		
		float: left;
	}
	.righttext{
		padding-left:10px;
		float: left;
		display: flex;
		flex-direction: column;
	}
	.swiper-info{
		width: 100%;
		margin-bottom: 20px;
	}
	.addjzk{
		margin-top: 10px;
	}
	.bottomss{
		 border-width: 0rpx;
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 padding-top: 1px;
	}
	.jiuzhenka{
		height: 300rpx;
		/* background-image: url('../../static/tjjzks.jpg'); */
		border-radius: 15px;
		background-color: #409EFF;
	}
	.existjiuzhenka{
		height: 150px;
		/* background-image: url('../../static/tjjzk.jpg'); */
		background-color: #409EFF;
		border-radius: 15px;
		padding: 0 15px;
	}
	.textlist{
		display: flex;
		flex-direction: column;
		color: white;
		align-items: center;
		width: 100%;
		
	}
	.headera{
		width: 100%;
		padding: 10px 10px 10px 20px;
		height: 60rpx;
	}
	.contlist{
		float: left;
		width: 48%;
		height: 160rpx;
		/* background-image: url('../../static/tjjzk.jpg'); */
		background-color: white;
		border-radius: 15px;
		display: flex;
		align-items: center;
		/* background: linear-gradient(to right, #ffffff, ##33C7FC); */
	}
	
	.cont{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.contleft{
		height: 100%;
		width: 36%;
		display: flex;
		justify-content: center;
		align-items: center;
		float: left;
	}
	.contright{
		width: 60%;
		height: 100%;
		float: left;
		display: flex;
		flex-direction: column;
		align-items: ;
		justify-content: center;
	}
	.conta{
		font-weight: bold;
		font-size: 30rpx;
		text-align: left;
	}
	.contb{
		font-size: 24rpx;
		color: gray;
		text-align: left;
	}
	.bottom{
		font-size: 20px;
		height: 30px;
		align-items: center;
		color: #28bcc0;
		padding-left: 15px;
		font-weight: bold;
		border-bottom:1px gainsboro solid;
	}
	
	.existleft{
		width: 60%;
		height: 70%;
		float: left;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		color: white;
	}
	.existright{
		width: 40%;
		height:70%;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.existcont{
		width: 100%;
		height: 30%;
		float: left;
		border-top:dashed white 1px ;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
	}
	.elone{
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		font-size: 35rpx;
	}
	.mr{
		float: left;
		border: 1px solid white;
		padding: 0 5px;
		border-radius: 5px;
		align-items: center;
		font-size: 14px;
		margin-right: 10px;
	}
	.qh{
		 float: left;
		border-radius: 5px;
		 padding: 0 5px;
		 background-color: white;
		 color: #28bcc0;
		 
		 align-items: center;
		 font-size: 14px;
	}
	.Unbinding{
		padding: 2px 15px;
		border: 1px solid white;
		border-radius: 5px;
		margin: 5px;
	}
	.sm{
		position: absolute;
		top: 190rpx;
		z-index:2;
		font-size: 14px;
		width:150rpx;
		background-color:#67C23A;
		color: white;
		display: flex;
		justify-content: center;
		border-radius: 5px;
	}
	.code{
		width: 660rpx;
		height: 760rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.codetetx{
		margin-top: 30rpx;
		font-size: 35rpx;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.bottomlist{
		height: 74rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		line-height: 74rpx;
		font-size: 16rpx;
	}
	.copyright{
		color: gray;
		float: left;
	}
	
	.yuanneifuwu{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
</style>	